<template>
    <div :id="id">
        <div :id="id+'-menu'" style="line-height:24px;"></div>
        <div :id="id+'-editor'" :style="styleObject"></div>
        <input type="hidden" v-model="editorContent" :id="id+'-text'" />
    </div>
</template>

<script>
    import E from 'wangeditor'
    export default {
        name: 'editorElem',
        props: ['id','catchData', 'content','editorMenus', 'width','height'],    // 接收父组件的方法
        data() {
            return {
                styleObject: {
                    width: 'auto',
                    height: '800px'
                },
                editor: null,
                editorContent: ''
            }
        },
        created() {
            this.initSize()
            // this.createEditor()
        },
        mounted () {
            this.editor = new E('#'+this.id+'-menu', '#'+this.id+'-editor')
            this.editor.customConfig.onchange = (html) => {
                this.editorContent = html
                // this.content = html
                //this.catchData(html)  // 把这个html通过catchData的方法传入父组件
            }
            this.editor.customConfig.zIndex = 100
            this.editor.customConfig.uploadImgShowBase64 = true
            this.editor.customConfig.onchangeTimeout = 200
            this.editor.customConfig.menus = this.editorMenus
            this.editor.create()
            // this.setHtml(this.editorContent)
            // console.log(this.content)
            // console.log(this.editorContent)
            // this.editor.txt.html(this.editorContent)
        },
        methods: {
            // 设置尺寸
            initSize() {
                if (this.width) {
                    this.styleObject.width = this.width + 'px'
                }
                if (this.height) {
                    this.styleObject.height = this.height + 'px'
                }
            },
            // setHtml(value){
            //     this.$nextTick(() => {
            //         console.log(value)
            //         this.editor.txt.html(value)
            //     })
            // }
            // 创建编辑器
            // createEditor() {
            //     if (!document.getElementById(this.id)) {
            //     setTimeout(() => {
            //         this.createEditor(this.id)
            //     }, 100)
            //     return
            //     }
            //     this.editor = new E('#'+this.id+'-menu', '#'+this.id+'-editor')
            //     this.editor.customConfig.onchange   = (html) => {
            //         this.editorContent = html
            //         this.catchData(html)  // 把这个html通过catchData的方法传入父组件
            //     },
            //     this.editor.customConfig.zIndex = 100
            //     this.editor.customConfig.uploadImgShowBase64 = true
            //     this.editor.customConfig.menus = this.editorMenus
            //     this.editor.create()     // 创建富文本实例
            // }
        },
        watch: {
            content (curVal,oldVal) {
                this.editorContent = this.content
                this.editor.txt.html(this.content)
            }
        }
    }
</script>

